<!-- 数据同步 -->
<template>
  <div class='data-sync-container'>
    <div class="top">
      <el-button >一键同步</el-button>
    </div>
    <div class="exam-list">
      <div class="exam-item">服务1</div>
      <div class="exam-item">竞赛简介</div>
      <div class="exam-item">排行榜详情</div>
      <div class="exam-item">环节1</div>
      <div class="exam-item">环节2</div>
      <div class="exam-item">环节3</div>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
    data() {
      return {

      };
    },
  methods: {

  },
  mounted() {

  },
}
</script>
<style lang="scss" scoped>
.data-sync-container{
  .top{
    height: 129px;
    line-height: 129px;
    padding-left: 35px;
    .el-button {
      background: #217CD8;
      color: #fff;
    }
  }

  .exam-list{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    .exam-item{
      flex: 1;
      height: 120px;
      // margin: 0 20px;
      margin: 0 20px 20px 0; 
      padding-top: 20px;
      
      text-align: center;
      border: 1px solid #D5D7DB;
      box-sizing: border-box;
      width: calc((100% - 60px) / 4); 
      // 这里的60px = (分布个数4-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 60px) / 4);
      max-width: calc((100% - 60px) / 4);

      &:nth-child(4n + 4) {
        margin-right: 0;
      }  

    }
  }
}

</style>